<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
	</head>
	<body>
		<h1>Axios远程调用练习</h1>
		<script src="../../Js/axios.js"></script>
		<script>
			/*
				1.promise对象解决了传统ajax中的回调地狱问题
				2.Axios封装了promise对象，异步调用更加简洁
				3.常见的请求类型 1.get(查) 2.post(增) 3.put(改) 4.delete(删)
				4.分组:用法相同 get/delete  post/put
				注意事项：默认条件下通过浏览器只能发起Get请求
			*/
		   /* 1.Axios入门案例-get请求
			  原始方式：参数：1.ur地址 2.请求参数 3.回调函数
			  axios方式：参数：1.ur地址 2.请求参数
			  关键字：then(回调函数)*/
	
		   axios.get("http://localhost:8099/findAll")
				.then(function(result){
					//result返回的是一个promise对象
					console.log(result)
					//动态获取服务器返回值，使用result.data的方式
					console.log(result.data)
				
				})
			//2.箭头函数的写法,result参数只有一个可以省略括号
			axios.get("http://localhost:8099/findAll")
				 .then((result)=>{
					 console.log(result.data)
				 })
			
			/**
			 * 3.带参数的请求方式1---字符串拼接
			  * 需求：查询ID=100的用户数据
			  * url:http://localhost:8099/getUserBy?id=100
			*/
			axios.get("http://localhost:8099/getUserBy?id=11")
				.then(result =>{
					console.log(result.data)
				})
				
			/**
			 * 根据对象查询数据库
			 * 根据name="大乔" sex="女"的条件查询数据库
			 * url: http://localhost:8099/getUserByNS
			 */
			//封装对象
			let user= {
				name: '大乔',
				sex: '女'
			}
			axios.get("http://localhost:8099/getUserByNS",{
				//关键字params
				params: user
			}).then(result =>{
				console.log(result.data)
			})
			
			/**
			 * 要求：利用restFul风格 
			 * 		查询name中包含"君"的数据
			 * url：http://localhost:8099/user/君   请求类型为：GET
			 */
			axios.get("http://localhost:8099/user/君")
				.then(result =>{
					console.log(result.data)
				})
				
				
			axios.get("http://localhost:8099/user/年/未知")
				.then(result =>{
					console.log(result.data)
				}) 
			</script>
	</body>
</html>
